<template>
  <div class="flex gap-x-4 items-center">
    <div class="flex-1">
      <SearchInput />
    </div>
    <div class="text-[rgb(var(--v-theme-icon))]">
      <j-icon :size="24" color="rgb(var(--v-theme-icon))" @click="changeTheme">
        {{ !isDark ? "白天" : "夜晚" }}
      </j-icon>
    </div>
  </div>
</template>
<script lang="ts" setup name="HomeNewAppBar">
import SearchInput from "@/components/SearchInput";
import useIsDark from "@/hooks/useIsDark.ts";

const { changeTheme, isDark } = useIsDark();
</script>
